<template>
  <div id="OrderBody">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="Order">
        <orderbody-item
          :arr="listArr"
        ></orderbody-item>
      </el-tab-pane>
      <el-tab-pane label="代付款" name="Payment"
        ><orderbody-item :arr="listArr"></orderbody-item>
        </el-tab-pane>
      <el-tab-pane label="代发货" name="Delivery"
        ><orderbody-item :arr="listArr"></orderbody-item>
        </el-tab-pane
      >
      <el-tab-pane label="待收货" name="Receive"
        ><orderbody-item :arr="listArr"></orderbody-item>
        </el-tab-pane
      >
      <el-tab-pane label="待评价" name="Appraise"
        ><orderbody-item :arr="listArr"></orderbody-item>
        </el-tab-pane
      >
      <el-tab-pane label="已完成" name="Complete"
        ><orderbody-item :arr="listArr"></orderbody-item>
        </el-tab-pane
      >
      <el-tab-pane label="已取消" name="cancel"
        ><orderbody-item :arr="listArr"></orderbody-item>
        </el-tab-pane
      >
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-tabs>
  </div>
</template>
  
<script>
import { OrderData } from "@/api/user";
import orderbodyItem from "./orderbodyItem.vue";
export default {
  components: { orderbodyItem },
  name: "OrderBody",
  data() {
    return {
      activeName: "Order",
      listArr: [],
      islistArr: true,
      page: 1,
    };
  },
  methods: {
    init(page, state = 0) {
      OrderData(page, state).then((res) => {
        this.listArr = res.data.result.items;
        // if (this.listArr.length <= 0) {
        //   this.islistArr = false;
        // } else {
        //   this.islistArr = true;

        // }
      });
    },
    handleClick(tab) {
      let sta = Number(tab.index);
      this.$nextTick(function(){
        this.init(this.page, sta);
      })
      
    },
    handleCurrentChange(val) {
      this.page = val;
      this.init(this.page);
    },
  },
  created() {
    this.$nextTick(function(){
      this.init(this.page);
    })
  },
};
</script>
  
 <style lang="scss" scoped>
#OrderBody {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  //右侧表单
  .el-tabs {
    flex: 1;
    background: #fff;
    margin-left: 20px;
    ::v-deep .el-tabs__item {
      font-size: 16px;
      height: 50px;
      line-height: 50px;
      border-top: 2px solid #ffffff00;
      padding: 0px 22px;
    }
    ::v-deep .el-tabs__item.is-active {
      border-top: 2px solid #27ba9b;
      color: #333;
    }
  }
  ::v-deep .el-tabs__content {
    text-align: left;
    width: 98%;
    margin: 0 auto;
  }
  
  //分页
  .el-pagination {
    width: 540px;
    margin: 10px auto;
  }
}
</style>

<style>
@font-face {
  font-family: "iconfont"; /* Project id 3732463 */
  src: url("//at.alicdn.com/t/c/font_3732463_q06q6u436zh.woff2?t=1666919290458")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_3732463_q06q6u436zh.woff?t=1666919290458")
      format("woff"),
    url("//at.alicdn.com/t/c/font_3732463_q06q6u436zh.ttf?t=1666919290458")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-weizhi:before {
  content: "\e615";
}

.icon-shezhi:before {
  content: "\e8b7";
}

.icon-zuanshi:before {
  content: "\e61d";
}

.icon-shizhong:before {
  content: "\e78b";
}
</style>